<template>
  <div id="Item-component">
    <div
      class="item"
      v-for="(item, index) in $store.state.cart_goods"
      v
      :key="index"
    >
      <div class="left" @click="change(index)">
        <input type="checkbox" :checked="item.ischebox" />
      </div>
      <div class="right">
        <van-card
          :num="item.count"
          :price="item.lowNowPrice"
          :desc="item.desc"
          :title="item.title"
          :thumb="item.image"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Item",
  data() {
    return {}
  },
  mounted() {},
  activated() {
    let price = 0
    this.$store.state.cart_goods
      .filter((item) => item.ischebox != false)
      .map((item) => {
        return item.lowNowPrice * item.count
      }, 0)
      .forEach((item) => {
        price += item
      })
    this.$emit("istures", {
      istures: true,
      price,
    })
  },
  methods: {
    //判断当前按钮是否被选中
    change(index) {
      this.$store.dispatch("isture", index)
      //循环判断每次是不是全选
      const istures = this.$store.state.cart_goods.every(
        (item) => item.ischebox
      )

      let price = 0
      this.$store.state.cart_goods
        .filter((item) => item.ischebox != false)
        .map((item) => {
          return item.lowNowPrice * item.count
        }, 0)
        .forEach((item) => {
          price += item
        })

      this.$emit("istures", {
        istures,
        price,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.item {
  display: flex;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  box-sizing: content-box;
  margin-bottom: 3px;
  .left {
    flex: 1;
    line-height: 104px;
    text-align: center;
    input {
      width: 20px;
      height: 20px;
    }
  }
  .right {
    flex: 9;
  }
}
.van-card__content {
  // width: 200px;
  // flex: 1;
  width: calc(100vw - 88px - 60px);
}
</style>
